<template>
	<view class="w-100">
		<view class="w-100 mt-2">
			<view class="flex-1 py-2 bg-white mb-2 article-list" v-for="(item,index) in collectList" :key="index"
				@click="toArticle(item.article)">
				<view class="flex-1 mx-2">
					<view class="flex-1 row-ac-sb">
						<view class="row-ac">
							<view class="user-headimg">
								<image :src="item.user_headimage" mode=""></image>
							</view>
							<view class="ml-2">
								<view class="font-s-35">{{ item.user_nickname || item.user_username }}</view>
								<view class="font-s-2 mt text-light-grey">{{ item.create_time }}</view>
							</view>
						</view>
					</view>
					<view class="article-title mx-2 mt-1 in2line font-w-600">{{ item.article_title }}</view>
					<view class="mt font-s-35 mx-2 in3line article-describe">{{ item.article_describe }}</view>
					<view class="flex-1 py-1 row-ac font-s-2 text-muted">
						<view>点赞<text class="ml">{{ item.likes_count }}</text></view>
						<view class="ml-4">收藏<text class="ml">{{ item.collect_count }}</text></view>
						<view class="ml-4">评论<text class="ml">5124</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		articlecollectListUrl
	} from '@/api/article';
	export default {
		data() {
			return {
				queryInfo: {
					page: 1,
					page_size: 10
				},
				collectList: []
			}
		},
		onLoad() {
			this.getCollectList()
		},
		methods: {
			getCollectList() {
				this.$R.get(articlecollectListUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.collectList = res.data.list
						console.log(this.collectList);
					}
				})
			},
			toArticle(articleId) {
				uni.navigateTo({
					url: '/pages/article/article-text?articleId=' + articleId,
				})
			},
		}
	}
</script>

<style lang="scss">
	.article-list {
		.user-headimg {
			width: 78rpx;
			height: 78rpx;
			border-radius: 50%;

			image {
				width: 78rpx;
				height: 78rpx;
				border-radius: 50%;
			}
		}

		.article-title {
			font-size: 31rpx;
		}

		.article-describe {
			line-height: 1.6;
			color: #575757;
		}
	}
</style>